<template>
  <el-drawer ref="drawerRef" v-if="!isMobile" v-model="dialogVisible" title="道路概况" direction="ltr" @close="close">
    <template #header="{ close, titleId, titleClass }">
      <div class="btns">
        <div :class="['btn', { active: item.id === active }]" v-for="item in btns" :key="item.id"
          @click="handleClick(item)">
          {{ item.name }}
        </div>
      </div>
    </template>

    <div class="content content1">
      <template v-if="active === 1">
        <div class="path1">
          <div class="item">
            <div class="top">
              <img class="img" src="@/assets/imgs/定位-位置.png" alt="" />
              <div class="name">位置</div>
            </div>
            <div class="value1">
              <div class="text">{{ obj.position[0] }}</div>
              <div class="text">{{ obj.position[1] }}</div>
            </div>
          </div>
          <div class="item">
            <div class="top">
              <img class="img" src="@/assets/imgs/经纬度.png" alt="" />
              <div class="name">经纬度</div>
            </div>
            <div>
              <div class="value2">
                <div class="text">{{ obj.ll[0] }}</div>
                <div class="text" style="margin-top: 3px">N</div>
              </div>
              <div class="value2">
                <div class="text">{{ obj.ll[1] }}</div>
                <div class="text" style="margin-top: 3px">E</div>
              </div>
            </div>
          </div>
          <div class="item" v-if="isShow(['然乌镇', '龙泉山'])">
            <div class="top">
              <img class="img" src="@/assets/imgs/长度.png" alt="" />
              <div class="name">长度</div>
            </div>
            <div class="value">
              <div class="text">{{ obj.long }}</div>
              <div class="text">M</div>
            </div>
          </div>
          <div class="item">
            <div class="top">
              <img class="img" src="@/assets/imgs/宽度.png" alt="" />
              <div class="name">宽度</div>
            </div>
            <div class="value">
              <div class="text">{{ obj.width }}</div>
              <div class="text">M</div>
            </div>
          </div>
          <div class="item">
            <div class="top">
              <img class="img" src="@/assets/imgs/载重.png" alt="" />
              <div class="name">限重</div>
            </div>
            <div class="value">
              <div class="text">{{ obj.weight }}</div>
              <div class="text">吨</div>
            </div>
          </div>
          <div class="item">
            <div class="top">
              <img class="img" src="@/assets/imgs/海拔.png" alt="" />
              <div class="name">海拔高度</div>
            </div>
            <div class="value">
              <div class="text">{{ obj.height || 0 }}</div>
              <div class="text">M</div>
            </div>
          </div>
          <div class="item" v-if="['model1', 'model2'].includes(route.path)">
            <div class="top">
              <img class="img" src="@/assets/imgs/桥墩.png" alt="" />
              <div class="name">桥墩</div>
            </div>
            <div class="value">
              <div class="text">{{ obj.brigde }}</div>
              <div class="text">孔</div>
            </div>
          </div>
        </div>

        <!-- 路面状态类型统计 -->
        <div class="device-panel">
          <div class="panel-title">
            <span class="title-text">路面状态类型统计</span>
          </div>
          <div class="device-grid">
            <div class="left">
              <img class="img" src="@/assets/imgs/path/sucai2.png" alt="sucai2" />
              <div class="label">
                <div>裂缝类 0.294%</div>
                <div>变形类 0.316%</div>
                <div>松散类 0.215%</div>
                <div>其他类 2.185%</div>
              </div>
            </div>
            <div class="right">
              <div class="item" v-for="i in 4" :key="i">
                <img class="img" src="@/assets/imgs/path/sucai1.png" alt="sucai1" />
                <div>
                  <div class="top">
                    <span class="label">拥抱面积：</span>
                    <span class="value">325.93 m</span>
                  </div>
                  <div class="bottom">
                    <span class="label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;占比：</span>
                    <span class="value">0.005%</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-if="active === 2">
        <div class="flow1">
          <div class="top">
            <div class="item">
              <!-- <div class="name">今日车辆</div> -->
              <img class="img" src="@/assets/imgs/今日车辆.png" alt="" />
              <div class="number">
                <span>{{ cardData.today }}</span><span>辆</span>
              </div>
            </div>
            <div class="item">
              <img class="img" src="@/assets/imgs/当前车流量.png" alt="" />
              <!-- <div class="name">当前车流量</div> -->
              <div class="number">
                <span>{{ cardData.current }}</span><span>辆</span>
              </div>
            </div>
            <div class="item">
              <img class="img" src="@/assets/imgs/平均时速.png" alt="" />
              <!-- <div class="name">平均时速</div> -->
              <div class="number">
                <span>{{ cardData.speed }}</span><span>Km/m</span>
              </div>
            </div>
          </div>
          <div class="bottom">
            <div class="title">通行记录</div>
            <BasicTable style="--el-fill-color-light: 'transparent'" :columns="recordColums" size="small"
              :data="recordData" :isPage="false" height="60vh" />
          </div>
        </div>
      </template>
      <template v-if="active === 3">
        <BasicTable style="--el-fill-color-light: 'transparent'" :columns="emergencyColumns" size="small"
          :data="emergencyData" :isPage="false" height="80vh" @row-click="rowClick" />
      </template>
      <template v-if="active === 4"> 道路地图 </template>
    </div>
  </el-drawer>

  <el-dialog v-else class="dialog" v-model="dialogVisible" title="道路概况" :top="isMobile ? '10vh' : '25vh'"
    :width="isMobile ? '90%' : '30%'" @close="close">
    <template #header="{ close, titleId, titleClass }">
      <div class="btns">
        <div :class="['btn', { active: item.id === active }]" v-for="item in btns" :key="item.id"
          @click="handleClick(item)">
          {{ item.name }}
        </div>
      </div>
    </template>
    <div class="content">
      <template v-if="active === 1">
        <div class="path">
          <div class="item">
            <div class="top">
              <img class="img" src="@/assets/imgs/定位-位置.png" alt="" />
              <div class="name">位置</div>
            </div>
            <div class="value1">
              <div class="text">{{ obj.position[0] }}</div>
              <div class="text">{{ obj.position[1] }}</div>
            </div>
          </div>
          <div class="item">
            <div class="top">
              <img class="img" src="@/assets/imgs/经纬度.png" alt="" />
              <div class="name">经纬度</div>
            </div>
            <div>
              <div class="value2">
                <div class="text">{{ obj.ll[0] }}</div>
                <div class="text">N</div>
              </div>
              <div class="value2">
                <div class="text">{{ obj.ll[1] }}</div>
                <div class="text">E</div>
              </div>
            </div>
          </div>
          <div class="item" v-if="isShow(['然乌镇', '龙泉山'])">
            <div class="top">
              <img class="img" src="@/assets/imgs/长度.png" alt="" />
              <div class="name">长度</div>
            </div>
            <div class="value">
              <div class="text">{{ obj.long }}</div>
              <div class="text">M</div>
            </div>
          </div>
          <div class="item">
            <div class="top">
              <img class="img" src="@/assets/imgs/宽度.png" alt="" />
              <div class="name">宽度</div>
            </div>
            <div class="value">
              <div class="text">{{ obj.width }}</div>
              <div class="text">M</div>
            </div>
          </div>
          <div class="item">
            <div class="top">
              <img class="img" src="@/assets/imgs/载重.png" alt="" />
              <div class="name">限重</div>
            </div>
            <div class="value">
              <div class="text">{{ obj.weight }}</div>
              <div class="text">吨</div>
            </div>
          </div>
          <div class="item">
            <div class="top">
              <img class="img" src="@/assets/imgs/海拔.png" alt="" />
              <div class="name">海拔</div>
            </div>
            <div class="value">
              <div class="text">{{ obj.height || 0 }}</div>
              <div class="text">M</div>
            </div>
          </div>
          <div class="item" v-if="['model1', 'model2'].includes(route.path)">
            <div class="top">
              <img class="img" src="@/assets/imgs/桥墩.png" alt="" />
              <div class="name">桥墩</div>
            </div>
            <div class="value">
              <div class="text">{{ obj.brigde }}</div>
              <div class="text">孔</div>
            </div>
          </div>
        </div>
      </template>
      <template v-if="active === 2">
        <div class="flow">
          <div class="top">
            <div class="item">
              <!-- <div class="name">今日车辆</div> -->
              <img class="img" src="@/assets/imgs/今日车辆.png" alt="" />
              <div class="number">
                <span>{{ cardData.today }}</span><span>辆</span>
              </div>
            </div>
            <div class="item">
              <img class="img" src="@/assets/imgs/当前车流量.png" alt="" />
              <!-- <div class="name">当前车流量</div> -->
              <div class="number">
                <span>{{ cardData.current }}</span><span>辆</span>
              </div>
            </div>
            <div class="item">
              <img class="img" src="@/assets/imgs/平均时速.png" alt="" />
              <!-- <div class="name">平均时速</div> -->
              <div class="number">
                <span>{{ cardData.speed }}</span><span>Km/m</span>
              </div>
            </div>
          </div>
          <div class="bottom">
            <div class="title">通行记录</div>
            <BasicTable style="--el-fill-color-light: 'transparent'" :columns="recordColums" size="small"
              :data="recordData" :isPage="false" height="260" />
          </div>
        </div>
      </template>
      <template v-if="active === 3">
        <BasicTable style="--el-fill-color-light: 'transparent'" :columns="emergencyColumns" size="small"
          :data="emergencyData" :isPage="false" height="360" @row-click="rowClick" />
      </template>
      <template v-if="active === 4"> 道路地图 </template>
    </div>
  </el-dialog>
</template>

<script setup>
import 定位 from "@/assets/imgs/定位-位置.png";
import 长度 from "@/assets/imgs/长度.png";
import 宽度 from "@/assets/imgs/宽度.png";
import 桥墩 from "@/assets/imgs/桥墩.png";
import 载重 from "@/assets/imgs/载重.png";
import { generateRandomLicensePlate, generateRandomTime } from "@/utils/index";
import dayjs from "dayjs";
const isMobile = inject("isMobile");
const btns = [
  {
    id: 1,
    name: "道路概况",
  },
  {
    id: 2,
    name: "道路流量",
  },
  {
    id: 3,
    name: "危险监测",
  },
  // {
  //   id: 4,
  //   name: '道路地图'
  // }
];
// 通行记录
const recordColums = [
  {
    prop: "index",
    type: "index",
    label: "序号",
    width: 50,
    align: "center",
  },
  {
    prop: "number",
    label: "车牌号",
    align: "center",
  },
  {
    prop: "time",
    label: "通行时间",
    align: "center",
  },
  {
    prop: "status",
    label: "通行状态",
    width: 80,
    align: "center",
  },
];
// 紧急状况
const emergencyColumns = [
  {
    prop: "id",
    label: "序号",
    width: 50,
  },
  {
    prop: "typeName",
    label: "危险源",
    align: "center",
  },
  {
    prop: "time",
    label: "采集时间",
    align: "center",
  },
  {
    prop: "status",
    label: "危险程度",
    align: "center",
    width: 80,
  },
];
const emergencyData = ref([]);
const active = ref(1);
const dialogVisible = ref(false);
const cardData = ref({
  today: 10,
  current: 5,
  speed: 60,
});
let timerSpeed, timerFlow, timerToday, timerRecord;

const route = useRoute();
const obj = ref({});

switch (route.query.name) {
  case "金沙江":
    obj.value = {
      position: ["甘孜州", "巴塘县"],
      ll: ["99.01", "29.76"],
      long: "361.54",
      width: "11.5",
      brigde: "15",
      weight: "20",
      height: "1000",
    };
    emergencyData.value = [
      {
        id: 1,
        typeName: "积水",
        type: "water",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "小",
      },
      {
        id: 2,
        typeName: "结冰",
        type: "freeze",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "中",
      },
      {
        id: 3,
        typeName: "落石",
        type: "rockfall",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "大",
      },
      {
        id: 5,
        type: "collapse",
        name: "崩塌",
        typeName: "崩塌",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "大",
      },
      {
        id: 6,
        type: "coast",
        name: "滑坡",
        typeName: "滑坡",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "大",
      },
      {
        id: 7,
        type: "flow",
        name: "泥石流",
        typeName: "泥石流",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "大",
      },
    ];
    break;
  case "然乌镇":
    obj.value = {
      position: ["西藏昌都市", "八宿县"],
      ll: ["96.75", "29.50  "],
      long: "31.54",
      width: "7.5",
      brigde: "5",
      weight: "25",
      height: "1200",
    };
    emergencyData.value = [
      {
        id: 1,
        typeName: "积水",
        type: "water",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "小",
      },
      {
        id: 2,
        typeName: "结冰",
        type: "freeze",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "中",
      },
      {
        id: 8,
        type: "collapse",
        name: "崩塌",
        typeName: "崩塌",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "大",
      },
      {
        id: 9,
        type: "coast",
        name: "滑坡",
        typeName: "滑坡",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "大",
      },
      {
        id: 10,
        type: "flow",
        name: "泥石流",
        typeName: "泥石流",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "大",
      },
    ];
    break;
  case "二郎山":
    obj.value = {
      position: ["甘孜州", "泸定县"],
      ll: ["102.2", "29.84"],
      long: "4176 ",
      width: "7.5",
      brigde: "0",
      weight: "20",
      height: "1500",
    };
    emergencyData.value = [
      {
        id: 1,
        typeName: "积水",
        type: "water",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "小",
      },
      {
        id: 2,
        typeName: "结冰",
        type: "freeze",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "中",
      },
      {
        id: 3,
        type: "collapse",
        name: "崩塌",
        typeName: "崩塌",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "大",
      },
      {
        id: 4,
        type: "coast",
        name: "滑坡",
        typeName: "滑坡",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "大",
      },
      {
        id: 5,
        type: "flow",
        name: "泥石流",
        typeName: "泥石流",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "大",
      },
    ];
    break;
  case "龙泉山":
    obj.value = {
      position: ["成都龙泉驿", "龙泉山"],
      ll: ["104.30", "30.54"],
      long: "361.54",
      width: "7.8",
      brigde: "15",
      weight: "30",
      height: "800",
    };
    emergencyData.value = [
      {
        id: 1,
        typeName: "积水",
        type: "water",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "小",
      },
      {
        id: 2,
        typeName: "结冰",
        type: "freeze",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "中",
      },
      {
        id: 3,
        typeName: "落石",
        type: "rockfall",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "大",
      },
      {
        id: 5,
        type: "collapse",
        name: "崩塌",
        typeName: "崩塌",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "大",
      },
      {
        id: 6,
        type: "coast",
        name: "滑坡",
        typeName: "滑坡",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "大",
      },
      {
        id: 7,
        type: "flow",
        name: "泥石流",
        typeName: "泥石流",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "大",
      },
    ];
    break
  case "安庆市":
    obj.value = {
      position: ["安徽省", "安庆市"],
      ll: ["117.17", "30.45"],
      long: "1270",
      width: "18",
      brigde: "15",
      weight: "120",
      height: "1500",
    };
    emergencyData.value = [
      {
        id: 1,
        typeName: "积水",
        type: "water",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "小",
      },
      {
        id: 2,
        typeName: "结冰",
        type: "freeze",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "中",
      },
      {
        id: 3,
        typeName: "落石",
        type: "rockfall",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "大",
      },
      {
        id: 5,
        type: "collapse",
        name: "崩塌",
        typeName: "崩塌",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "大",
      },
      {
        id: 6,
        type: "coast",
        name: "滑坡",
        typeName: "滑坡",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "大",
      },
      {
        id: 7,
        type: "flow",
        name: "泥石流",
        typeName: "泥石流",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "大",
      },
    ];
    break
  default:
    obj.value = {
      position: ["省份", "城市"],
      ll: ["117.17", "30.45"],
      long: "1270",
      width: "18",
      brigde: "15",
      weight: "120",
      height: "500",
    };
    emergencyData.value = [
      {
        id: 1,
        typeName: "积水",
        type: "water",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "小",
      },
      {
        id: 2,
        typeName: "结冰",
        type: "freeze",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "中",
      },
      {
        id: 3,
        typeName: "落石",
        type: "rockfall",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "大",
      },
      {
        id: 5,
        type: "collapse",
        name: "崩塌",
        typeName: "崩塌",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "大",
      },
      {
        id: 6,
        type: "coast",
        name: "滑坡",
        typeName: "滑坡",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "大",
      },
      {
        id: 7,
        type: "flow",
        name: "泥石流",
        typeName: "泥石流",
        time: dayjs()
          .subtract(Math.floor(Math.random() * 24), "hours") // 随机减去0-23小时
          .subtract(Math.floor(Math.random() * 60), "minutes") // 随机减去0-59分钟
          .format("YYYY/MM/DD HH:mm"),
        status: "大",
      },
    ];
    break
}

console.log("emergencyData.value", route.query.name, obj.value);

const isShow = computed(() => {
  return (arrs) => {
    return !arrs.includes(route.query.name);
  };
});
const handleClick = (item) => {
  active.value = item.id;
};

const rowClick = (row) => {
  console.log("rowClick", row);
  return;
  window.dispatchEvent(
    new CustomEvent("clickWateHanle", { detail: { row: row } })
  );
  close();
};
const recordId = ref(0);
// 修复初始数据
const initRecordData = () => {
  // 生成5条初始记录（更合理的数量）
  const initialRecords = Array.from({ length: 10 }, (_, index) => {
    const now = new Date();
    // 时间间隔：1-5分钟随机
    const timeGap = Math.floor(Math.random() * 5 * 60000) + 60000;
    const recordTime = new Date(now.getTime() - index * timeGap);

    return {
      id: ++recordId.value,
      number: generateRandomLicensePlate(),
      time: dayjs(recordTime).format("YYYY/MM/DD HH:mm:ss"),
      status: "正常",
    };
  });
  return initialRecords.sort((a, b) => new Date(b.time) - new Date(a.time));
};
const recordData = ref(initRecordData());
const open = () => {
  dialogVisible.value = true;
  // 重置ID计数器（避免重复ID）
  recordId.value =
    recordData.value.length > 0
      ? Math.max(...recordData.value.map((r) => r.id))
      : 0;

  clearInterval(timerSpeed);
  clearInterval(timerFlow);
  clearInterval(timerToday);
  clearInterval(timerRecord);

  // 3秒更新平均时速 (60-80)
  timerSpeed = setInterval(() => {
    cardData.value.speed = Math.floor(Math.random() * 21) + 60;
  }, 3000);

  // 10秒更新当前车流量 (3-7)
  timerFlow = setInterval(() => {
    cardData.value.current = Math.floor(Math.random() * 5) + 3;
  }, 10000);

  // 10秒更新今日车辆
  timerToday = setInterval(() => {
    cardData.value.today += cardData.value.current;
  }, 10000);

  // 20秒增加2条通行记录
  timerRecord = setInterval(() => {
    const now = new Date();

    // 第一条记录 - 当前时间
    const record1 = {
      id: ++recordId.value,
      number: generateRandomLicensePlate(),
      time: dayjs(now).format("YYYY/MM/DD HH:mm:ss"),
      status: "正常",
    };

    // 第二条记录 - 当前时间+1秒
    const record2 = {
      id: ++recordId.value,
      number: generateRandomLicensePlate(),
      time: dayjs(now.getTime() + 1000).format("YYYY/MM/DD HH:mm:ss"),
      status: "正常",
    };

    // 添加到记录数组开头（最新记录显示在最上面）
    recordData.value = [record1, record2, ...recordData.value];

    // 限制记录数量（最多保留100条）
    if (recordData.value.length > 100) {
      recordData.value = recordData.value.slice(0, 100);
    }
  }, 20000);
};
const close = () => {
  dialogVisible.value = false;
  clearInterval(timerSpeed);
  clearInterval(timerFlow);
  clearInterval(timerToday);
  clearInterval(timerRecord);
};
defineExpose({ open, close });

// onMounted(() => {

// })
// onUnmounted(() => {
// })
</script>

<style scoped lang="scss">
.content1 {
  .path1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 10px;

    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      padding: 5px 8px;
      background-color: #9a9a9a1e;
      border-radius: 10px;

      .top {
        display: flex;
        align-items: center;
        gap: 10px;

        .img {
          width: 40px;
          height: 40px;
        }

        .name {
          font-size: 14px;
        }
      }

      .value1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .text {
          color: #fff;
          font-size: 10px;
        }

        .text:last-child {
          font-weight: bold;
          font-size: 14px;
        }
      }

      .value2 {
        display: flex;
        gap: 5px;

        .text {
          color: #fff;
          font-size: 10px;
        }

        .text:first-child {
          font-weight: bold;
          font-size: 14px;
        }
      }

      .value {
        display: flex;
        align-items: center;
        gap: 3px;

        .text:first-child {
          color: #fff;
          font-size: 16px;
          font-weight: bold;
        }

        .text:last-child {
          margin-top: 5px;
          font-size: 14px;
        }
      }
    }
  }

  .device-panel {
    margin-top: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 16px;
    backdrop-filter: blur(10px);

    .panel-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 16px;
      position: relative;
      padding-left: 24px;
      color: #40e0d0;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background: #40e0d0;
        border-radius: 2px;
      }

      &::after {
        content: "";
        position: absolute;
        left: 0px;
        right: 0;
        // top: 50%;
        bottom: -10px;
        height: 1px;
        background: linear-gradient(90deg, #40e0d0, transparent);
      }
    }

    .device-grid {
      margin-top: 30px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;

        .img {
          margin: 0 auto;
          width: 130px;
          height: 130px;
        }

        .label {
          margin-top: 20px;
          display: flex;
          flex-direction: column;
          gap: 12px;
          font-size: 16px;
          color: #fff;
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .item {
          display: flex;
          align-items: center;
          gap: 20px;

          .img {
            height: 70px;
          }

          .top,
          .bottom {
            font-size: 16px;

            .label {
              color: #fff;
            }

            .value {
              color: #0d7d9b;
            }
          }
        }
      }
    }
  }

  .flow1 {
    .top {
      height: 150px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #9a9a9a1e;
      border-radius: 10px;

      .item {
        position: relative;

        .img {
          // position: absolute;
          // top: -23px;
          width: 150px;
          height: 150px;
        }

        // .name {
        //   font-size: 14px;
        //   font-weight: bold;
        // }

        .number {
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 2px;

          width: 150px;
          height: 195px;

          // margin-top: 10px;
          span:first-child {
            font-size: 16px;
            font-weight: bold;
            color: #fff;
          }

          span:last-child {
            margin-top: 3px;
            font-size: 10px;
          }
        }
      }
    }

    .bottom {
      margin-top: 10px;
      padding-top: 10px;
      background-color: #9a9a9a1e;
      border-radius: 10px;

      .title {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        color: #b0b9fc;
      }
    }
  }
}

.content {
  .path {
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    // flex-wrap: wrap;
    // gap: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

    // .first {
    //   display: flex;
    //   justify-content: space-around;
    //   align-items: center;
    // }

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      // justify-content: center;
      gap: 10px;
      padding: 5px 8px;
      background-color: #9a9a9a1e;
      border-radius: 10px;

      .top {
        display: flex;
        align-items: center;
        gap: 10px;

        .img {
          width: 35px;
          height: 35px;
        }

        .name {
          font-size: 10px;
        }
      }

      .value1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .text {
          text-align: center;
          color: #fff;
          font-size: 12px;
          margin-top: 3px;
        }

        .text:last-child {
          font-size: 12px;
          text-align: center;
        }
      }

      .value2 {
        display: flex;
        gap: 5px;
        align-items: center;

        .text {
          text-align: center;
          color: #fff;
          font-size: 13px;
        }

        .text:last-child {
          text-align: center;
          font-size: 13px;
        }
      }

      .value {
        display: flex;
        align-items: center;
        gap: 3px;

        .text:first-child {
          text-align: center;
          color: #fff;
          font-size: 13px;
        }

        .text:last-child {
          text-align: center;
          margin-top: 0px;
          font-size: 13px;
        }
      }
    }
  }
}

.flow {
  .top {
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #9a9a9a1e;
    border-radius: 10px;

    .item {
      position: relative;

      .img {
        // position: absolute;
        // top: -23px;
        width: 90px;
        height: 90px;
      }

      // .name {
      //   font-size: 14px;
      //   font-weight: bold;
      // }

      .number {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2px;

        width: 90px;
        height: 120px;

        // margin-top: 10px;
        span:first-child {
          font-size: 16px;
          color: #fff;
        }

        span:last-child {
          margin-top: 3px;
          font-size: 10px;
        }
      }
    }
  }

  .bottom {
    margin-top: 10px;
    padding-top: 10px;
    background-color: #9a9a9a1e;
    border-radius: 10px;

    .title {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      color: #b0b9fc;
    }
  }
}
</style>
